<template>
    <!-- <image :src="imgUrl" @error="handleLoadError"></image> -->
    <!-- <image class="image" :src="imgUrl" mode="aspectFill" /> -->
    <TnPhotoAlbum class="image" :data="[imgUrl]" :column="1" img-mode="aspectFill" />
</template>

<script lang="ts" setup>
import { ref, computed, watch, onMounted } from 'vue'
import { getTempUrl } from '@/utils/image'
import TnPhotoAlbum from '@tuniao/tnui-vue3-uniapp/components/photo-album/src/photo-album.vue'

const props = defineProps({
    imageSrc: {
        type: String,
        required: true
    },
    cache: {
        type: Boolean,
        default: true,
    },
    cacheTime: {
        type: Number,
    },
    delay: {
        type: Number,
        default: 1
    }
})

const useCache = computed(() => {
    // 判断环境
    let inH5 = false
    // #ifdef H5
    inH5 = true
    // #endif
    // 判断是否使用缓存
    return !inH5 && props.cache
})

const imgUrl = ref('')

const handleCache = async () => {
    console.log('easy-cacheimage', props)
    imgUrl.value = await getTempUrl(props.imageSrc as string)
    console.log('easy-cacheimage', imgUrl.value)
}

const handleLoadError = () => {
    if (imgUrl.value) {
        // 如果使用缓存地址加载失败的话换回默认源地址
        imgUrl.value = '';
    } else {
        // 加载失败图的base64码
        imgUrl.value = '';
    }
}

onMounted(() => {
    handleCache()
});
</script>

<style lang="scss" scoped>
.image {
    width: 100%;
    height: 100%;
    min-width: 200px;
    min-height: 200px;;
}
</style>
